<template>
  <div class="container">
    <div>
      <span></span>
    </div>
    <span>我是根组件</span>
    <!-- 通过标签对 + 组件名的方式使用组件 -->
    <Parent>
      <template v-slot:another>
        <div>我是another插槽</div>
      </template>
      <template v-slot:default>
        <div>我是default插槽</div>
      </template>
    </Parent>
  </div>
</template>

<script setup>
  // 导入需要使用的组件
  import Parent from './Parent.vue';
  import { ref } from 'vue';
  let content = ref("App的子组件")
</script>
<!-- scoped 
 1、限制CSS样式作用域为当前组件，而不会影响到其他组件 
 2、会在标签上添加一个唯一属性，格式为 data-v-...-->
<style scoped>
    div {
      background-color: aqua;
    }
    span {
        color: red;
    }
</style>